<template>
  <div>
    <table cellspacing="0" class="table">
      <thead>
        <tr>
          <th width="50">
            <Checkbox v-model="selectAll" @on-change="onSelectAll"></Checkbox>
          </th>
          <th width="20"></th>
          <th v-for="item in listData" :key="item.id" :width="item.width">{{item.title}}</th>
        </tr>
      </thead>
      <tbody v-for="(item, index) in list" :key="index">
        <tr>
          <td>
            <Checkbox v-model="item.checked" @on-change="onJoinSaleCheck(item)"></Checkbox>
          </td>
          <td>
            <Icon
              type="ios-arrow-down"
              size="20"
              v-if="item.showChildren"
              @click="onShowChild(item)"
            ></Icon>
            <Icon
              type="ios-arrow-right"
              size="20"
              v-if="item.productSkuList && item.productSkuList.length && !item.showChildren"
              @click="onShowChild(item)"
            ></Icon>
          </td>
          <td>{{item.id}}</td>
          <td>-</td>
          <td style="width:100px">
            <div class="e1 flex-center">
              <img :src="item.productPrimaryImg" alt>
              {{item.title}}
            </div>
          </td>
          <td>
            <div class="e1">{{item.brandId}}</div>
          </td>
          <td>{{item.isShelf | status}}</td>
          <td>{{item.brandId}}</td>
          <!-- <td>{{item.sale}}</td>
          <td>{{item.total}}</td>-->
          <td>
            <Button size="small" @click="onDeleteSale(index,list)">删除</Button>
          </td>
        </tr>
        <tr
          v-if="item.productSkuList && item.productSkuList.length"
          v-for="(child, index1) in item.productSkuList"
          :key="index1"
          v-show="item.showChildren"
        >
          <td></td>
          <td></td>
          <td>
            <Checkbox v-model="child.checked" @on-change="onJoinSaleCheck(child,item)"></Checkbox>
          </td>
          <td>{{child.id}}</td>
          <td style="width:100px">
            <div class="e1 flex-center">
              <img :src="item.productPrimaryImg" alt>
              {{item.title}}
            </div>
          </td>
          <td>
            <div class="e1">{{item.brandId}}</div>
          </td>
          <td>{{item.isShelf | status}}</td>
          <td>{{item.brandId}}</td>
          <!-- <td>{{item.brandId}}</td> -->
          <!-- <td>{{child.sale}}</td>
          <td>{{child.total}}</td>-->
          <td>
            <Button @click="onDeleteSale(index1, item.productSkuList,index,list)" size="small">删除</Button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pager">
      <Page
        :total="totalItem"
        :current="currentPage"
        :page-size="pageSize"
        @on-change="onPageChange"
        @on-page-size-change="onPageSizeChange"
        show-sizer
        placement="top"
      ></Page>
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
  </div>
</template>
<script>
export default {
  props: {
    list: "",
    listData: ""
  },
  data() {
    return {
      selectAll: false,
      status: "pass",
      totalItem: 1,
      pageSize: window.$pageSize,
      currentPage: 1
    };
  },
  filters: {
    status(val) {
      if (val) {
        return "上架";
      } else {
        return "下架";
      }
    }
  },
  methods: {
    onSelectAll() {
      // 全选 、全不选
      this.$emit("onChangeSelectAll", this.selectAll);
    },
    onJoinSale(child, item) {
      this.$emit("onJoinSale", child, item);
    },
    onShowChild(item) {
      item.showChildren = !item.showChildren;
    },
    onJoinSaleCheck(child, item) {
      this.$emit("onJoinSaleCheck", child, item);
    },
    onDeleteSale (index, data, index1, data1) {
      this.$emit('onDeleteSale', index, data, index1, data1)
    },
    getData() {},
    onPageChange() {},
    onPageSizeChange() {}
  },
  mounted() {
  }
};
</script>

